<template>
	<rh-wx class="wallet-cash-out-container">
		<view class="model-item model-form">
			<view class="model-label flex-between">
				<text class="labe-txt">提现金额</text>
			</view>
			<view class="form-content">
				<view class="form-val-content flex-normal">
					<text class="val-icon">￥</text>
					<u--input v-model="params.money" fontSize="48rpx"
						placeholder="请输入提现金额" @change="withdrawalServiceCharge"
						border="none" type="number"
					></u--input>
				</view>
				<view class="form-action-content">
					<text 
					class="action-info"
					v-if="params.money"
					>手续费：{{serveFee}} 元</text>
					<text class="action-info">可用余额：{{baseData['balance']}}</text>
					<text class="action-btn" @click="cashAll">全部提现</text>	
				</view>
			</view>
		</view>
		<view class="model-item model-form">
			<view class="model-label flex-between">
				<text class="labe-txt">提现账户</text>
				<text class="labe-btn" @click="jumpPage('walletAccount')">账户管理</text>
			</view>
			<radio-group class="card-content" @change="radioChange">
				<label class="group-item flex-between" v-for="(item, index) in list" color="#22984E" :key="item.id">
					<view class="card-info flex-normal">
						<view class="info-txt">{{item.accountName}}</view>
						<view class="info-txt">{{item.accountPhone}}</view>
					</view>
					<radio style="transform:scale(0.8)" :value="item.id" :checked="item.id == params.userBankId"/>
				</label>
			</radio-group>
		</view>
		<rh-submit-btn class="submit-btn" text="立即提现" position="relative" :submit-action="submit"></rh-submit-btn>
		<view class="tip">
			<view class="title">提现须知</view>
			<view class="content">
				<text class="tip-txt">1、提现后，通常1-2小时到账；</text>
				<text class="tip-txt">2、如提现长时间未到账，可致电客服：15895997449反馈；</text>
				<text class="tip-txt">3、如提现失败，资金会返回账户，请重新发起提现。</text>
			</view>
		</view>
	</rh-wx>
</template>

<script>
	import {isWechat} from '@/script/wx-premission.js'
	import {
		getUserBalance, 
		getBankCardList, 
		withdrawal,
		withdrawalServiceCharge,
	} from '@/api/wallet/index.js'
	export default {
		data() {
			return {
				isWechat: isWechat(),
				baseData: {},
				emitValue: '',
				list: [],
				params: {},
				serveFee: '0.00'
			}
		},
		onShow() {
			let _self = this
			if(!_self.isWechat) return
			_self.showWxApp().then(boo => {
				_self.queryUserBalance()
				_self.queryBankCardList()
			})
		},
		methods: {
			jumpPage(name){
				let _self = this
				_self.$$router.push({name})
			},
			queryUserBalance(){
				let _self = this, isSuccess = false
				getUserBalance().then(res => {
					let {balance = '0.00', withdrawalStatus = false, notApplicableBalance = '0.00'} = res.data
					_self.$set(_self.baseData, 'balance', balance)
					_self.$set(_self.baseData, 'withdrawalStatus', withdrawalStatus)
					_self.$set(_self.baseData, 'notApplicableBalance', notApplicableBalance)
				})
			},
			queryBankCardList(){
				let _self = this, isSuccess = false
				getBankCardList().then(res => {
					res.data.forEach(i => {
						i.id = `${i.id}`
					})
					_self.list = res.data
				})
			},
			cashAll(){
				let _self = this
				_self.$set(_self.params, 'money', _self.baseData['balance'])
			},
			radioChange(e){
				let _self = this, {value} = e.target
				_self.$set(_self.params, 'userBankId', value)
			},
			withdrawalServiceCharge(){
				let _self = this
				let {money, userBankId} = _self.params
				let query = {
					noloading: true,
					money: _self.params.money
				}
				if(!query.money) return
				withdrawalServiceCharge(query).then(res => {
					_self.serveFee = res.data || '0.00'
				})
			},
			submit(val){
				let _self = this
				return new Promise((resolve, reject) => {
					let {money, userBankId} = _self.params
					if(!_self.baseData['withdrawalStatus']) {
						_self.$attention.noIcon('当前账户不可提现')
						return reject(false)
					} 
					if(!money || money == '') {
						_self.$attention.noIcon('请输入提现金额')
						return reject(false)
					} 
					if(money > parseFloat(_self.baseData['balance'])) {
						_self.$attention.noIcon('不能超过余额')
						return reject(false)
					} 
					if(!userBankId || userBankId == '') {
						_self.$attention.noIcon('请选择银行卡')
						return reject(false)
					}
					withdrawal(_self.params).then(res => {
						_self.$attention.noIcon('提现已申请')
						setTimeout(() => {
							_self.$$router.push({name: 'walletSuccess', query: {type: 'cashOut'}})
						}, 1200)
					}).finally(() => {
						resolve(true)
					})
				})
			},
		}

	}
</script>
<style lang="scss" scoped>
  // @include fontStyle(#666, 24rpx);
	@mixin fontStyle($color, $size, $weight: 500) {
		color: $color;
		font-size: $size;
		font-weight: $weight;
	}
	.wallet-cash-out-container {
		background-color: #F4F8F9;
		min-height: 100vh;
		padding: 30rpx 20rpx;
		position: relative;
		.submit-btn{
			margin-top: 180rpx;
		}
		.card-content{
			.group-item{
				padding-bottom: 30rpx;
				.info-txt{
					@include fontStyle(#444444, 24rpx);
					margin-right: 24rpx;
				}
			}
		}
		.form-content{
			.form-val-content{
				padding: 12rpx 0;
				.val-icon{
					@include fontStyle(#3D3D3D, 20rpx);
					margin-right: 16rpx;
				}
			}
			.form-action-content{
				padding: 20rpx 0;
				border-top: 1rpx dashed #D8D8D8;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.action-info{
					margin-right: 40rpx;
					@include fontStyle(#7F7F7F, 20rpx);
				}
				.action-btn{
					@include fontStyle(#0003AA, 20rpx);
				}
			}
		}
		.model-item{
			margin-bottom: 30rpx;
			border-radius: 6rpx;
			background-color: #fff;
			padding: 0 30rpx;
			.model-label{
				padding: 30rpx 0;
				.labe-txt{
					@include fontStyle(#3D3D3D, 32rpx);
				}
				.labe-btn{
					@include fontStyle(#0003AA, 24rpx);
				}
			}
		}
	}
	.tip {
		position: absolute;
		bottom: 60rpx;
		font-size: 28rpx;
		color: #3d3d3d;
		.title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.tip-txt {
			display: block;
			line-height: 36rpx;
		}
	}
</style>


